<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: Boolean,
  duration: Number,
  label: {
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['update:modelValue', 'close'])

// 显示
const visible = ref(false)
// 进度
const progress = ref(0);
let timer = null;

watch(() => props.modelValue, (val) => {
  if (val) {
    startLoading()
  } else {
    forceClose()
  }
}, { deep: true, immediate: true })


function startLoading() {
  visible.value = true;
  progress.value = 0;
  let fakeProgress = [5, 12, 18, 25, 32, 39, 46, 53, 60, 67, 74, 81, 88, 91, 93, 95, 96, 97, 98, 99]; // 模拟加载的进度
  let delay = props.duration / fakeProgress.length;
  let index = 0;

  timer = setInterval(() => {
    if (index < fakeProgress.length) {
      progress.value = fakeProgress[index];
      index++;
    }
  }, delay);
}

// 正常完成加载（变 100% 再关闭）
const completeLoading = () => {
  return new Promise((resolve) => {
    if (timer) clearInterval(timer);
    progress.value = 100;
    setTimeout(() => {
      visible.value = false;
      emit("update:modelValue", false);
      resolve()
    }, 500);
  })
};


// 立即关闭（不管进度多少）
function forceClose() {
  if (timer) clearInterval(timer);
  visible.value = false;
  emit("update:modelValue", false);
  emit("close");
};


// 页面跳转
const toPage = () => {
  if (timer) clearInterval(timer);
  emit('update:modelValue', false)
  emit("close");
  uni.navigateTo({ url: '/pages/createdHistory/index' })
}




defineExpose({
  completeLoading,
});
</script>

<template>
  <div class="centered" v-if="visible">
    <div class="close-box">
      <button class="close" @click="forceClose">稍后查看</button>
      <div class="content" @click="toPage">前往创作历史</div>
    </div>

    <div class="blob-1"></div>
    <div class="blob-2"></div>

    <div class="text">
      <div class="title">
        <slot name="title">创作加载{{ progress }}%</slot>
      </div>
      <div>
        <slot name="content">
          <!-- 加载完成后，可在创作历史中查看生成记录 -->
          <swiper autoplay vertical circular interval="3000" class="swiper">
            <swiper-item>加载完成后，可在创作历史中查看生成记录</swiper-item>
            <swiper-item v-for="item of label" v-if="label.length">{{ item }}</swiper-item>
          </swiper>
        </slot>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.swiper {
  color: #FFF;
  height: 60rpx;
  line-height: 60rpx;
}

.centered {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background: rgba(0, 0, 0, 0.9);
  animation: Fade 1.5s;
  z-index: 1000;

  .close-box {
    position: fixed;
    top: 55%;
    left: 50%;
    transform: translate(-50%);
    color: var(--a-one-text-color);

    .close {
      // width: 257rpx;
      width: 400rpx;
      height: 80rpx;
      z-index: 1001;
      font-size: 28rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      border: 2rpx solid var(--a-one-text-color);
      background-color: transparent;
      color: var(--a-one-text-color);
    }

    .content {
      font-size: 26rpx;
      text-align: center;
      transform: translate(0, 40rpx);
    }
  }



  .text {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28rpx;
    color: var(--a-two-text-color);
    width: 100%;
    text-align: center;
    letter-spacing: 1rpx;




    .title {
      font-size: 34rpx;
      letter-spacing: 3rpx;
      font-weight: normal;
      margin-bottom: 50rpx;

    }

    .time {
      margin: 24rpx 0;
    }
  }

}

.blob-1,
.blob-2 {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  background: #fff;
  border-radius: 50%;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.blob-1 {
  left: 20%;
  animation: osc-l 2.5s ease infinite;
}

.blob-2 {
  left: 80%;
  animation: osc-r 2.5s ease infinite;
  background: #0ff;
}

@keyframes osc-l {
  0% {
    left: 20%;
  }

  50% {
    left: 50%;
  }

  100% {
    left: 20%;
  }
}

@keyframes osc-r {
  0% {
    left: 80%;
  }

  50% {
    left: 50%;
  }

  100% {
    left: 80%;
  }
}


@keyframes Fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
</style>
